<template>
    <div>
        <el-dialog v-model="dialogVisible" title="" width="900px" align-center :before-close="handleClose">
            <template #title>
                <div class="bold fs-20 flex flex-jc-c">
                    导入薪资表
                </div>
            </template>
            <div class="step-box mg-b-20">
                <el-steps :active="activeStep">
                    <el-step title="上传文件" description="上传填好的信息表" />
                    <el-step title="确认信息" description="匹配导入信息" />
                    <el-step title="查看结果" description="导入成功" />
                </el-steps>
            </div>
            <div v-show="activeStep === 1" class="step-1">
                <step1 ref="step1" @uploadData="handleStep" />
            </div>
            <div v-show="activeStep === 2" class="step-2">
                <step2 :error-list="errorList" />
            </div>
            <div v-show="activeStep === 3" class="step-3">
                <step3 />
            </div>

            <template #footer>
                <div v-if="activeStep === 1" class="flex flex-jc-c">
                    <!-- <el-button type="primary" @click="activeStep = 2">下一步</el-button> -->
                </div>
                <div v-if="activeStep === 2" class="flex flex-jc-c">
                    <el-button @click="activeStep = 1">返回上一步</el-button>
                    <!-- <el-button type="primary" @click="activeStep = 3">确定</el-button> -->
                </div>
                <div v-if="activeStep === 3" class="flex flex-jc-c">
                    <el-button type="primary" @click="dialogVisible = false">返回列表</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import tableComponent from '@/components/table-component/index.vue'
import step1 from './upload-salary-step1.vue';
import step2 from './upload-salary-step2.vue';
import step3 from './upload-salary-step3.vue';
export default defineComponent({
    props: {
        show: {
            type: Boolean,
            default: false,
        },
        // type: {
        //     type: String,
        //     default: 'pay'
        // }
    },
    components: {
        tableComponent,
        step1,
        step2,
        step3
    },
    emits: ['update:show', 'refresh'],
    data() {
        return {
            dialogVisible: false,
            activeStep: 1,
            dateValue: '',
            errorList: []
        }
    },
    computed: {

    },
    watch: {
        show(newval) {
            this.dialogVisible = newval
            if (!newval) {
                this.activeStep = 1
                ;(this as any).$refs.step1.dateValue = ''
                this.$emit('refresh')
            }
        },
        dialogVisible(newval) {
            this.$emit('update:show', newval)
        },
    },
    methods: {
        handleClose(done: Function) {
            this.dialogVisible = false
            done()
        },
        handleStep(data: any) {
            if (data) {
                this.activeStep = data.step
                this.errorList = data.data
            }
        }
    }
})

</script>
<style lang="stylus" scoped>
.title-box
    margin-top -20px
.name 
    color #3D3D3D
.value
    color #565868
.set-lh
    line-height 40px
.step-box
    background #F5F7FA
    border-radius 4px
    padding 15px 54px 15px
</style>